<template>
	<hx-navbar title="订单物流"></hx-navbar>
	<view class="logistics-container" v-if="order">
		<view class="logistics-warp">
			<view class="item">
				<view class="title"> 物流公司 </view>
				<view class="desc"> {{ order.orderDelivery?.logisticsCompanyName }} </view>
			</view>
			<view class="item">
				<view class="title"> 物流单号 </view>
				<view class="desc logistics-no">
					<view>{{ order.orderDelivery.logisticsNo }}</view>
					<u-button size="mini" type="primary" @click="copy(order.orderDelivery?.logisticsNo)">复制</u-button>
				</view>
			</view>
			<view class="item">
				<view class="title"> 收货地址 </view>
				<view class="desc"> {{ order.detailAddress }} </view>
			</view>
			<view class="item">
				<view class="title"> 签收状态 </view>
				<view class="desc"> {{ order.orderDelivery?.isCheck === '1' ? '已签收' : '未签收' }} </view>
			</view>
		</view>
		<view> 物流信息 </view>
		<u-read-more show-height="250" :toggle="true" close-text="查看完整物流信息"
			v-if="order.orderDelivery?.logisticsList && order.orderDelivery?.logisticsList.length > 0">
			<view class="u-padding-10">
				<u-time-line class="logistics-timeline">
					<u-time-line-item node-top="10" v-for="(item, index) in order.orderDelivery.logisticsList"
						:key="index">
						<template v-slot:content>
							<view :class="['u-order-desc', { 'active': index === 0 }]">{{ item.logisticsContext }}
							</view>
							<view :class="['u-order-time', { 'active': index === 0 }]">{{ item.logisticsTime }}</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</u-read-more>
		<u-empty v-else text="暂无物流信息" mode="list"></u-empty>
	</view>
</template>


<script setup lang="ts">
import { getById } from '@/api/order/orderInfo';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const order = ref();
onLoad((options) => {
	getLogistics(options?.orderId);
});

const getLogistics = (orderId: string) => {
	getById(orderId).then((response) => {
		order.value = response.data;
	});
};
const copy = (logisticsNo: string) => {
	uni.setClipboardData({
		data: logisticsNo,
		success: function () { },
	});
};
</script>

<style lang="scss">
.logistics-container {
	padding: 20rpx;
	background-color: #ffffff;

	.logistics-warp {
		.item {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			justify-content: space-between;

			.title {
				color: #333;
				font-weight: bold;
			}

			.desc {
				color: #666;
			}

			.logistics-no {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 16rpx;
			}
		}
	}
}

.u-order-desc,
.u-order-time {
	transition: color 0.3s;
}

.u-order-desc {
	color: rgb(150, 150, 150);
	font-size: 28rpx;
	margin-bottom: 6rpx;

	&.active {
		color: #18b566;
	}
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: 26rpx;

	&.active {
		color: #18b566;
	}
}

.logistics-timeline {
	padding-left: 0rpx !important;
}
</style>
